import React, { useEffect, useState } from 'react';
import { Space, Table, Tag, Button, Form, Input, Select,DatePicker } from 'antd';
import type { TableProps } from 'antd';
import instance from '../../api/instance';

const { RangePicker } = DatePicker;

import TopSj from '../../components/TopSj';

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}


const Home: React.FC = () => {
  const [tableData, setTableData] = useState([])
  const [tableTotal, setTableTotal] = useState(0)
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [title,setTitle]=useState('')
  const [tag,setTag]=useState('')
  const [searchform] = Form.useForm();

  const columns: TableProps<DataType>['columns'] = [
    {
      title: '集合编号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '集合名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '内容体裁',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: '筛选方式',
      key: 'tags',
      dataIndex: 'tags',
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.name.length > 5 ? 'geekblue' : 'green';
            return (
              <Tag color={color} key={tag.name}>
                {tag.name.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: '内容量',
      dataIndex: 'viewCount',
      key: 'viewCount',
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button>查看</Button>
          <Button>编辑</Button>
          <Button>删除</Button>
        </Space>
      ),
    },
  ];

  const tableSj = () => {
    const params: {
      page:number,
      pageSize:number,
      keyword?:string,
      tag?:string
    } = {
      page, pageSize
    }
    if(title)params.keyword=title
    if(tag)params.tag=tag

    instance.get('/article/list', {
      params
    }).then((res) => {
      // 文件名：list1/Index.tsx 行数：99
      console.log('res', res)
      if (res.data.rows) {
        setTableData(res.data.rows)
        setTableTotal(res.data.count)
      }
    })
  }
  useEffect(() => {
    tableSj()
  }, [page, pageSize,title,tag])

  //分页
  const exchangeFy = (currentPage: number, currentPageSize: number) => {
    setPage(currentPage)
    setPageSize(currentPageSize)
  }

  //查询
  const onFinish = (values) => {
    setTitle(values.title)
    setTag(values.tag)
  };

  //重置
  const cz=()=>{
    searchform.resetFields()
    setTitle('')
    setTag('')
  }

  return (
    <div>
      {/* <Form
        name="basic"
        layout='inline'
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
        form={searchform}
      >
        <Form.Item
          label="集合编号"
          name="id"
        >
          <Input placeholder="请输入集合编号" />
        </Form.Item>

        <Form.Item
          label="集合名称"
          name="title"
        >
          <Input placeholder="请输入集合名称" />
        </Form.Item>

        <Form.Item
          label="内容体裁"
          name="content"
        >
          <Select
            defaultValue="全部"
            style={{ width: 120 }}
            options={[
              { value: 'HTTP', label: 'HTTP' },
              { value: '新增', label: '新增' },
            ]}
          />
        </Form.Item>

        <Form.Item
          label="筛选方式"
          name="tag"
        >
          <Select
            defaultValue="全部"
            style={{ width: 120 }}
            options={[
              { value: 'HTTP', label: 'HTTP' },
              { value: '新增', label: '新增' },
            ]}
          />
        </Form.Item>

        <Form.Item
          label="创建时间"
          name="createdAt"
        >
          <RangePicker />
        </Form.Item>

        <Form.Item
          label="状态"
          name="viewCount"
        >
          <Select
            defaultValue="全部"
            style={{ width: 120 }}
            options={[
              { value: '1', label: '1' },
              { value: '111', label: '111' },
            ]}
          />
        </Form.Item>

        <Form.Item label={null}>
          <Button type="primary" onClick={cz}>
            重置
          </Button>
        </Form.Item>

        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
      </Form> */}
      <TopSj onFinish={onFinish} cz={cz} searchform={searchform}></TopSj>
      <Table<DataType> columns={columns} dataSource={tableData}
        pagination={{
          total: tableTotal,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `Total ${total} items`,
          onChange: exchangeFy
        }} />
    </div>
  )
};

export default Home;